<template>
	<view :style="{height:windowHeight+'px'}">
		
			<uni-nav-bar  :fixed="true" shadow  status-bar left-icon="left" left-text="返回" title="任务管理" @clickLeft="back" />
			<uni-section padding="0 10px" title="">
				<view class="uni-padding-wrap uni-common-mt">
					<uni-segmented-control :current="current" :values="items" :style-type="styleType"
						:active-color="activeColor" @clickItem="onClickItem" />
				</view>
				<view class="content">
					<uni-card  :isFull="true">
						<view class="flex-b">
							<view class="line20">
								<view><text class="titleposition">大庆区xxx站点信息</text> <uni-tag class="ml5" text="维修单" type="success" /></view>
								<view><text>任务地址：</text><text>北京市大兴区双龙大道102号</text></view>
								<view><text>发布时间：</text><text>2024-04-01</text></view>
							</view>
							<view class="lineRight">
								<uni-tag :inverted="true" text="许原厂" type="primary" />
								<view>已接单</view>
							</view>
						</view>
						<view class="cardStyle">
							<view class="jindu"><text class="blue">[进行中]</text><text class="ml5">等待处理：0天12小时。</text></view>
							<view class="chakan" @click="detail"><uni-tag :inverted="true" text="查看" type="primary"/></view>
						</view>
					</uni-card>
					<uni-card  :isFull="true" >
						<view class="flex-b">
							<view class="line20">
								<view><text class="titleposition">大庆区xxx站点信息</text> <uni-tag class="ml5" text="维修单" type="success" /></view>
								<view><text>任务地址：</text><text>北京市大兴区双龙大道102号</text></view>
								<view><text>发布时间：</text><text>2024-04-01</text></view>
							</view>
							<view class="lineRight">
								<uni-tag :inverted="true" text="许原厂" type="primary" />
								<view>已接单</view>
							</view>
						</view>
						<view class="cardStyle">
							<view class="jindu"><text class="blue">[进行中]</text><text class="ml5">等待处理：0天12小时。</text></view>
							<view class="chakan"><uni-tag :inverted="true" text="查看" type="primary" /></view>
						</view>
					</uni-card>
					<uni-card  :isFull="true">
						<view class="flex-b">
							<view class="line20">
								<view><text class="titleposition">大庆区xxx站点信息</text> <uni-tag class="ml5" text="维修单" type="success" /></view>
								<view><text>任务地址：</text><text>北京市大兴区双龙大道102号</text></view>
								<view><text>发布时间：</text><text>2024-04-01</text></view>
							</view>
							<view class="lineRight">
								<uni-tag :inverted="true" text="许原厂" type="primary" />
								<view>已接单</view>
							</view>
						</view>
						<view class="cardStyle">
							<view class="jindu"><text class="blue">[进行中]</text><text class="ml5">等待处理：0天12小时。</text></view>
							<view class="chakan"><uni-tag :inverted="true" text="查看" type="primary" /></view>
						</view>
					</uni-card>
				</view>
			</uni-section>
	</view>
</template>

<script>
	export default {

		data() {
			return {
				windowHeight: 700,
				items: ['全部', '进行时', '已完成'],
				current: 0,
				colorIndex: 0,
				activeColor: '#007aff',
				styleType: 'text'
			}
		},
		onLoad() {
			const sysInfo = uni.getSystemInfoSync();
			this.windowHeight = sysInfo.windowHeight;
			 
		},
		computed: {
			// 使用计算属性将 menuList 数据分割成每个 swiper-item 中的子数组
		
		},
		methods: {
			back() {
				uni.navigateBack({
					delta: 1
				})
			},
			//选项卡选择
			onClickItem(e) {
				if (this.current !== e.currentIndex) {
					this.current = e.currentIndex
				}
			},
			//查看详情
			detail(e) {
				uni.navigateTo({
					url:'/pages/myrw/detail'
				})
			},
		}
	}
</script>

<style lang="scss" scoped>
	.content {
		.uni-card{
			margin: 0.8rem 0 !important;
		}
		.ml5{
			margin-left: 1rem;
		}
		padding: 20rpx 0;
		.flex-b{
			display: flex;
			.line20{
				width: 80%;
				view{
					line-height: 1.8rem;
				}
			}
			.lineRight{
				width: 20%;
				display: flex;
				    flex-direction: column;
				    align-items: center;
				    justify-content: center;
			}
			
			.titleposition{
				font-size: 1rem;
				font-family: PingFangSC, PingFang SC;
				font-weight: 800;
			
			}
		}
		.cardStyle{
			display: flex;
			align-items: center;
			width: 100%;
			height: 2rem;
			background-color: #f3f3f3;
			padding: 0.2rem;
			.jindu{
				width: 80%;
				.blue{color: #0289FF;}
			}
			.chakan{
				width: 20%;
				text-align: center;
			}
		
		}
	}
</style>
